<template>
    <div>
        <div class="handle-box">
            <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
            <el-date-picker
                class="mr10"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-input placeholder="请输入产品名称查询" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <el-table
            :data="tableData"
            border
            class="table"
            style="width: 100%"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="SelectionChange"
        >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="birthDate" label="出生日期"></el-table-column>
            <el-table-column prop="education" label="学历"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" class="red">编辑</el-button>
                    <el-button type="text" icon="el-icon-remove-outline" class="red">加入黑名单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="query.page"
                :page-size="query.limit"
                :total="page.totalCount"
                :pager-count="5"
                @current-change="PageChange"
                @prev-click="PageChange"
                @next-click="PageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            query: {
                page: 1,
                limit: 10
            },
            tableData: [
                {
                    id: 1,
                    name: '车辆分类',
                    tel: '13161569041',
                    sex: '男',
                    birthDate: '1993-05-01',
                    education: '本科'
                },
                {
                    id: 1,
                    name: '张三',
                    tel: '13161569041',
                    sex: '男',
                    birthDate: '1993-05-01',
                    education: '本科'
                }
            ],
            page: {
                totalCount: 100
            }
        };
    },
    methods: {
        //序号
        tableIndex(index) {
            return (this.query.page - 1) * this.query.limit + index + 1;
        },
        //翻页
        PageChange(num) {},
        //选中
        SelectionChange() {},
        //新增
        addClick() {
            this.nameDrawerFlg = true;
        }
    }
};
</script>

<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
</style>